<template>
	<view>
		<hx-navbar ref="hxnb" :config="config"></hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../../../static/img/mine/mine-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d">
				<view class="flex_only flex_sb user-div">
					<view class="flex">
						<view class="zaixian-div">
							<image class="headimg" :src="lsdetail.avatar" mode="aspectFill"></image>
							<view class="zaixian" v-if="lsdetail.is_online==1">
								在线
							</view>
						</view>
						<view class="u-m-l-32">
							<view class="flex">
								<view class="font_18_333 font_weight">{{lsdetail.name}}</view>
								<view class="huiyuan-text" v-if="lsdetail.level_id>0">{{level_name}}</view>
							</view>
							<view class="zym flex u-m-t-20">
								<view class=" zym-text">
									执业认证 {{lsdetail.license_num}}
								</view>
							</view>
						</view>

					</view>
					<image @click="tosetting" class="bj-icon" src="../../../static/img/lawyerVersion/shezhi-icon.png"
						mode=""></image>
				</view>
				<view class="bg-text u-m-t-6">
					<image class="m-bg-2" src="../../../../static/img/mine/m-bg-2.png" mode=""></image>
					<view class="flex flex_sb hy-bg">
						<view class="">
							<view class="hy-text">
								升级会员尊享更多会员特权
							</view>
							<view class="u-m-t-16 hy-time" v-if="lsdetail.level_time">
								{{lsdetail.level_time}}到期
							</view>
						</view>
						<view class="hy-btn" @click="chongzhi(3)">
							{{lsdetail.level_id>0?level_name:'会员升级'}}
						</view>
					</view>

				</view>

			</view>
		</view>
		<view class="div-box qianbao-div flex flex_sb">
			<view class="qianbao-item" @click="toqian(1)">
				<view class="i-num">{{lsdetail.clues_num}}</view>
				<view class="i-name">可抢案源</view>
			</view>
			<view class="qianbao-item" @click="toqian(2)">
				<view class="i-num">{{lsdetail.jifen}}</view>
				<view class="i-name">积分</view>
			</view>
			<view class="qianbao-item" @click="toqian(3)">
				<view class="i-num">{{lsdetail.commission}}</view>
				<view class="i-name">我的佣金</view>
			</view>
			<!-- <view class="qianbao-item" @click="toqian(4)">
				<view class="i-num">20000</view>
				<view class="i-name">充值余额</view>
			</view>
			<view class="qianbao-item" @click="toqian(5)">
				<view class="i-num">20</view>
				<view class="i-name">我的钱包</view>
			</view> -->
		</view>
		<view class="div-box gn-div u-m-t-20 flex flex_wrap">
			<view class="gn-item flex flex_sb" @click="chongzhi(0)">
				<view class="">
					<view class="font_weight">
						线索包充值
					</view>
					<view class="font_12_666 u-m-t-8">
						案源低至17.9/条
					</view>
				</view>
				<image class="gb-icon" src="../../../static/img/lawyerVersion/m-i1.png" mode=""></image>
			</view>
			<view class="gn-item flex flex_sb" @click="chongzhi(1)">
				<view class="">
					<view class="font_weight">
						AI助手充值
					</view>
					<view class="font_12_666 u-m-t-8">
						AI大模型
					</view>
				</view>
				<image class="gb-icon" src="../../../static/img/lawyerVersion/m-i2.png" mode=""></image>
			</view>
			<view class="gn-item flex flex_sb" @click="chongzhi(2)">
				<view class="">
					<view class="font_weight">
						AI形象克隆
					</view>
					<view class="font_12_666 u-m-t-8">
						更贴心的服务
					</view>
				</view>
				<image class="gb-icon" src="../../../static/img/lawyerVersion/m-i3.png" mode=""></image>
			</view>
			<view class="gn-item flex flex_sb" @click="chongzhi(3)">
				<view class="">
					<view class="font_weight">
						会员开通
					</view>
					<view class="font_12_666 u-m-t-8">
						享受更多权益
					</view>
				</view>
				<image class="gb-icon" src="../../../static/img/lawyerVersion/m-i4.png" mode=""></image>
			</view>
		</view>
		<view class="div-box u-padding-24 u-m-t-20">
			<view class="">
				<view class="flex flex_sb">
					<view class="font_weight font_16_333 u-m-b-20">
						服务配置
					</view>
					<view class="font_12_666" @click="morefuwu">
						查看全部
						<u-icon name="arrow-right" color="#666" size="24"></u-icon>
					</view>
				</view>

				<scroll-view scroll-x="true">
					<fuwuListSetting type="2" @peizhi="peizhi" ref="fuwuListSetting"></fuwuListSetting>
				</scroll-view>
			</view>
		</view>
		<view class="wid686">
			<u-swiper height="114" :list="lblist"></u-swiper>
		</view>

		<view class="div-box u-padding-24 u-m-t-20">
			<view class="">
				<view class="flex flex_sb">
					<view class="font_weight font_16_333 u-m-b-20">
						个人主页
					</view>
					<view class="font_12_666" @click="toInfo(0)">
						查看全部
						<u-icon name="arrow-right" color="#666" size="24"></u-icon>
					</view>
				</view>
				<view class="geren-div flex flex_sb flex_wrap">
					<view class="geren-item geren-item1 flex" @click="toInfo(0)">
						<image class="geren-icon" src="../../../static/img/lawyerVersion/m-i21.png" mode=""></image>
						<view class="font_12_333 u-m-l-32">
							个人基础信息
						</view>
					</view>
					<view class="geren-item geren-item2 flex" @click="toInfo(1)">
						<image class="geren-icon" src="../../../static/img/lawyerVersion/m-i22.png" mode=""></image>
						<view class="font_12_333 u-m-l-32">
							律师经典案例
						</view>
					</view>
					<view class="geren-item geren-item3 flex" @click="toInfo(2)">
						<image class="geren-icon" src="../../../static/img/lawyerVersion/m-i23.png" mode=""></image>
						<view class="font_12_333 u-m-l-32">
							法律知识分享
						</view>
					</view>
					<view class="geren-item geren-item4 flex" @click="toInfo(3)">
						<image class="geren-icon" src="../../../static/img/lawyerVersion/m-i24.png" mode=""></image>
						<view class="font_12_333 u-m-l-32">
							法海视频
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="div-box u-padding-24 u-m-t-20">
			<view class="">
				<view class="font_weight font_16_333 u-m-b-20">
					常用工具
				</view>
				<view class="gj-div flex flex_wrap">
					<view class="gj-item gj-item1" @click="gjdetail(1)">
						<image class="gj-icon" src="../../../static/img/lawyerVersion/m-i31.png" mode=""></image>
						<view class="u-font-12 text_center u-m-t-10">
							积分兑换
						</view>
					</view>
					<view class="gj-item gj-item2" @click="gjdetail(2)">
						<image class="gj-icon" src="../../../static/img/lawyerVersion/m-i32.png" mode=""></image>
						<view class="u-font-12 text_center u-m-t-10">
							我的粉丝
						</view>
					</view>
					<view class="gj-item gj-item3" @click="gjdetail(3)">
						<image class="gj-icon" src="../../../static/img/lawyerVersion/m-i33.png" mode=""></image>
						<view class="u-font-12 text_center u-m-t-10">
							签到
						</view>
					</view>
					<view class="gj-item gj-item4" @click="gjdetail(4)">
						<image class="gj-icon" src="../../../static/img/lawyerVersion/m-i34.png" mode=""></image>
						<view class="u-font-12 text_center u-m-t-10">
							投诉建议
						</view>
					</view>
					<button open-type="contact" class="gj-item gj-item5">
						<image class="gj-icon" src="../../../static/img/lawyerVersion/m-i35.png" mode=""></image>
						<view class="u-font-12 text_center umt--12">
							客服中心
						</view>
					</button>
					<view class="gj-item gj-item6" @click="gjdetail(6)">
						<image class="gj-icon" src="../../../static/img/lawyerVersion/m-i36.png" mode=""></image>
						<view class="u-font-12 text_center u-m-t-10">
							成单喜报
						</view>
					</view>
					<view class="gj-item gj-item7" @click="gjdetail(7)">
						<image class="gj-icon" src="../../../../static/img/mine/mo-1.png" mode=""></image>
						<view class="u-font-12 text_center u-m-t-10">
							优惠券
						</view>
					</view>
					<view class="gj-item gj-item7" @click="gjdetail(8)">
						<image class="gj-icon" src="../../../../static/img/tabBar/5-2.png" mode=""></image>
						<view class="u-font-12 text_center u-m-t-10">
							用户端
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="div-box u-padding-24 u-m-t-20 u-m-b-20">
			<view class="">
				<view class="flex flex_sb">
					<view class="font_weight font_16_333 u-m-b-20">
						新人指导
					</view>
					<view class="font_12_666" @click="xinren">
						查看全部
						<u-icon name="arrow-right" color="#666" size="24"></u-icon>
					</view>
				</view>

				<scroll-view scroll-x="true" style="height: 480rpx;">
					<view class="pro-div flex">
						<view class="pro-item" v-for="(item,index) in xrlist" :key="index" @click="tidetail(item)">
							<view class="pro-img">
								<image class="pro-item-img" :src="item.thumb" mode="aspectFill">
								</image>
								<image v-if="item.video" class="pro-item-bf"
									src="../../../../static/img/home/bofang-icon.png" mode="">
								</image>
							</view>
							<view class="u-m-t-12">
								<view class="line_1 textitl">
									{{item.title}}
								</view>

							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-popup v-model="pzShow" mode="bottom" border-radius="32">
			<view class="po-bikan">
				<view class="po-bikan-top">
					<view class="flex flex_cen u-m-b-32">
						<!-- <view class="font_16_999">
							取消
						</view> -->
						<view class="bk-title ">
							商品配置
						</view>
						<!-- <view class="qr-btn">
							确认
						</view> -->
					</view>
					<view class="bk-title u-m-t-24">
						计算单位
					</view>
					<view class="js-div flex flex_sb u-m-t-24">
						<view class="js-item" :class="selList.unit==item.id?'js-item-sel':''" @click="jssel(item)"
							v-for="(item,index) in jsList" :key="index">
							{{item.name}}
						</view>
					</view>
					<view class="bk-title u-m-t-24">
						配置时间规格
					</view>
					<view class="gg-in flex flex_sb">
						<u-input class="gg-input" v-model="selList.time_sku" />
						<view class="font_12_666">
							{{jsValue}}
						</view>
					</view>
					<view class="bk-title u-m-t-24">
						配置价格
						<!-- <span class="font_12_999 font_weight_normal u-m-l-20">最低价格：￥49.90</span> -->
					</view>
					<view class="gg-in flex flex_sb">
						<u-input class="gg-input" v-model="selList.price" />
						<view class="font_12_666">
							元
						</view>
					</view>
				</view>

				<view class="btn-bo">
					<button class="btn_login_btn" @click="setsubmit">
						确定
					</button>
				</view>
			</view>
		</u-popup>
		<serverTime></serverTime>
		<gongzhonghaotanchuangVue></gongzhonghaotanchuangVue>
		<u-tabbar active-color="#FA3B21" :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
	import gongzhonghaotanchuangVue from '../../../../components/gongzhonghaotanchuang/gongzhonghaotanchuang.vue';
	import fuwuListSetting from '../../../components/fuwuListSetting/fuwuListSetting.vue';
	import serverTime from '../../../components/serverTime/serverTime.vue';
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	export default {
		components: {
			fuwuListSetting,
			gongzhonghaotanchuangVue,
			serverTime
		},
		data() {
			return {
				level_name: '',
				tabbar: '',
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#fff'],
					slideBackgroundColor: [1, '#fff']
				},

				lblist: [],

				lsdetail: [],
				xrlist: [],

				pzShow: false,
				jsList: [{
					name: '次',
					id: 1
				}, {
					name: '分钟',
					id: 2
				}, {
					name: '小时',
					id: 3
				}, {
					name: '天',
					id: 4
				}, {
					name: '秒',
					id: 5
				}], // <!-- 单位 1次 2分钟 3小时 4天 5秒 -->
				jsValue: '',
				selList: [],
			}
		},
		onLoad() {
			this.tabbar = [{
				iconPath: "/static/img/tabBar/1-2.png",
				selectedIconPath: "/static/img/tabBar/1-1.png",
				text: '首页',
				pagePath: "/subPackageA/pages/lawyerVersion/index/index"
			}, {
				iconPath: "/static/img/tabBar/2-2-2.png",
				selectedIconPath: "/static/img/tabBar/2-2-1.png",
				text: '工作台',
				// count: 2,
				isDot: true,
				pagePath: "/subPackageA/pages/lawyerVersion/staging/staging"
			}, {
				iconPath: "/static/img/tabBar/4-1.png",
				selectedIconPath: "/static/img/tabBar/4-2.png",
				text: '消息',
				// count: 2,
				isDot: false,
				pagePath: "/subPackageA/pages/lawyerVersion/message/message"
			}, {
				iconPath: "/static/img/tabBar/5-2.png",
				selectedIconPath: "/static/img/tabBar/5-1.png",
				text: '我的',
				pagePath: "/subPackageA/pages/lawyerVersion/mine/mine"
			}]


			this.lunbo()
			this.xinrenzhidao()
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			
			peizhi(e, list) {
				console.log(e, list)
				this.selList = list
				this.jsValue = e
				this.pzShow = true
			},
			jssel(item) {
				this.selList.unit = item.id
				this.jsValue = item.name
			},
			setsubmit() {
				if (!this.selList.id || !this.selList.unit || !this.selList.time_sku || !this.selList.price) {
					uni.showToast({
						title: "请填写完整",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/lawyer/set_serve_config',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						tag_id: this.selList.id,
						unit: this.selList.unit,
						time_sku: this.selList.time_sku,
						price: this.selList.price
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "配置成功",
							icon: "none"
						});
						this.pzShow = false
						this.selList = []
						// this.getmylist()
						this.$refs.fuwuListSetting.getmylist()
					}
				})
			},


			lunbo() {
				this.$api({
					url: '/getBanner',
					method: 'get',
					data: {
						position: 10,
					},
				}).then(res => {
					if (res.code == 1) {
						this.lblist = res.data
					}
				})
			},
			xinrenzhidao() {
				this.$api({
					url: '/np_article',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.xrlist = res.data
					}
				})
			},
			tidetail(e) {
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/mine/xinrenzhidaoDetail?item=" + JSON.stringify(e)
				})
			},
			//个人信息
			getInfo() {
				this.$api({
					url: '/lawyer/getLawyer',
					method: 'get',
					data: {
						token: uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.lsdetail = res.data
						
						this.$api({
							url: '/lawyer_equity',
							method: 'get',
							data: {
								token: uni.getStorageSync("token"),
							},
						}).then(res2 => {
							if (res2.code == 1) {
								for(let i in res2.data){
									if(res2.data[i].id == this.lsdetail.level_id){
										this.level_name = res2.data[i].name
									}
								}
							}
						})
					}
				})

			},
			morefuwu() {
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/mine/fuwuSetting"
				})
			},
			toInfo(e) {
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/mine/lawyerInfo?type=" + e
				})
			},
			tosetting() {
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/mine/setting"
				})
			},
			chongzhi(e) {
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/mine/chongzhiCenter?type=" + e
				})
			},
			gjdetail(e) {
				if (e == 1) {
					uni.navigateTo({
						url: "/pages/mine/jifenShop?type=2"
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: "/pages/mine/fans"
					})
				} else if (e == 3) {
					uni.navigateTo({
						url: "/pages/mine/singin?type=2"
					})
				} else if (e == 4) {
					uni.navigateTo({
						url: "/pages/mine/feedback"
					})
				} else if (e == 5) {

				} else if (e == 6) {
					uni.navigateTo({
						url: "/subPackageA/pages/lawyerVersion/index/goodNews"
					})
				}else if(e == 7){
					uni.navigateTo({
						url:"/pages/mine/youhuiquan?type=2"
					})
				}else if(e == 8){
					uni.reLaunch({
						url:"/pages/index/index"
					})
				}

			},
			toqian(e) {
				if (e == 1) {
					if (this.lsdetail.level_id != 0) {
						uni.navigateTo({
							url: "/subPackageA/pages/lawyerVersion/index/anyuanCenter?type=0"
						})
					} else {
						uni.showToast({
							title: "无权限，请升级会员",
							icon: "none"
						});
					}

				} else if (e == 2) {
					uni.navigateTo({
						url: "/pages/mine/jifenList?type=2"
					})
				} else if (e == 3) {
					uni.navigateTo({
						url: "/pages/mine/yongjin?type=2"
					})
				} else if (e == 4) {
					uni.navigateTo({
						url: "/subPackageA/pages/lawyerVersion/mine/chongzhiYue"
					})
				} else if (e == 5) {
					uni.navigateTo({
						url: "/subPackageA/pages/lawyerVersion/mine/myWallet"
					})
				}
			},
			xinren() {
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/mine/xinrenzhidao"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.umt--12 {
		margin-top: -6rpx;
	}

	.pro-div {
		margin-top: 20rpx;

		.pro-item {
			margin-right: 20rpx;

			.pro-img {
				position: relative;
				width: 272rpx;
				height: 412rpx;
				border-radius: 8rpx;

				.pro-item-img {
					position: absolute;
					top: 0;
					left: 0;
					width: 272rpx;
					height: 412rpx;
					border-radius: 8rpx;
				}

				.pro-item-bf {
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.textitl {
				width: 272rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.headimg {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
			}
		}
	}

	.gj-div {

		.gj-item {
			width: 142rpx;
			// height: 116rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 8rpx;
			padding: 16rpx;
			margin-top: 20rpx;

			&1 {
				background: #F2FAED;
				color: #64B130;
			}

			&2 {
				background: #E7F0FA;
				color: #298EFF;
			}

			&3 {
				background: #F5EBE4;
				color: #C46800;
			}

			&4 {
				background: #EAE7F9;
				color: #5F42EB;
			}

			&5 {
				background: #EDFAF7;
				color: #04BC91;
				padding: 4rpx 16rpx;

				padding-top: 16rpx;
			}

			&6 {
				background: #FAEDED;
				color: #FF2929;
			}
			
			&7 {
				background: #F2FAED;
				color: #333;
			}

			.gj-icon {
				margin: 0 auto;
				width: 56rpx;
				height: 56rpx;
			}
		}
	}

	.geren-div {

		.geren-item {
			width: 302rpx;
			height: 72rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding-left: 28rpx;
			margin-top: 20rpx;

			&1 {
				background: #FFFAF2;
			}

			&2 {
				background: #EDFDFD;
			}

			&3 {
				background: #F9FFF0;
			}

			&4 {
				background: #F5F9FF;
			}

			.geren-icon {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.wid686 {
		width: 686rpx;
		margin: 20rpx auto;
	}

	.div-box {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
	}

	/deep/ .u-indicator-item-round-active {
		width: 14rpx;
		background-color: #F7D37D;
	}

	.gn-div {
		padding: 24rpx;
	}

	.gn-item {

		width: 50%;

		.gb-icon {
			width: 96rpx;
			height: 96rpx;
		}

		&:nth-child(1) {
			padding: 0 24rpx 24rpx 0;
			border-right: 1px solid #eee;
			border-bottom: 1px solid #eee;
		}

		&:nth-child(2) {
			padding: 0 0 24rpx 24rpx;
			border-bottom: 1px solid #eee;
		}

		&:nth-child(3) {
			padding: 24rpx 24rpx 0 0;
			border-right: 1px solid #eee;
		}

		&:nth-child(4) {
			padding: 24rpx 0 0 24rpx;

		}
	}

	.qianbao-div {
		height: 144rpx;
		padding: 0 32rpx;
		margin-top: 36rpx;
	}

	.qianbao-item {
		text-align: center;

		.i-num {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		.i-name {
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;
			margin-top: 14rpx;
		}
	}

	.main-div {
		position: relative;
		width: 100%;
		background-color: #FFE7AF;
		height: 506rpx;
		display: flex;
		flex-direction: column;

		.main-bg {
			width: 100%;
			height: 506rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.m-d {
			position: relative;
			padding-top: 88rpx;
			z-index: 2;
			height: 100%;
			flex: 1;
			/* 这会使子元素填满剩余空间 */
		}
	}

	.user-div {
		padding: 40rpx 32rpx;

		.bj-icon {
			width: 40rpx;
			height: 40rpx;
		}

		.zaixian-div {
			width: 104rpx;
			height: 104rpx;
			position: relative;

			.headimg {
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
			}

			.zaixian {
				position: absolute;
				bottom: -10rpx;
				left: 22rpx;
				width: 60rpx;
				height: 28rpx;
				background: #252941;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 18rpx;
				color: #38E552;
				text-align: center;
				line-height: 28rpx;
			}
		}


		.huiyuan-text {
			width: 96rpx;
			height: 24rpx;
			background: #252941;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			margin-left: 16rpx;
			font-size: 18rpx;
			color: #FFE6BA;
			text-align: center;
			line-height: 22rpx;
		}

		.zym {
			padding: 4rpx 20rpx;
			background: #FFF3D6;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			.h25 {
				width: 28rpx;
				height: 26rpx;
			}

			.zym-text {
				font-size: 20rpx;
				color: #713005;
				// width: 160rpx;
			}
		}
	}

	.bg-text {
		position: absolute;
		width: 686rpx;
		height: 146rpx;
		margin-left: 32rpx;
		bottom: -14rpx;

		.m-bg-2 {
			width: 686rpx;
			height: 146rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.hy-bg {
			position: relative;
			z-index: 2;
			padding: 24rpx;

			.hy-text {
				font-weight: bold;
				font-size: 28rpx;
				color: #FFE8B2;

				.vip-i {
					width: 68rpx;
					height: 26rpx;
					margin-left: 8rpx;
				}
			}

			.hy-time {
				font-size: 20rpx;
				color: #FFE8B2;
			}

			.hy-btn {
				font-size: 24rpx;
				color: #955712;
				width: 152rpx;
				height: 48rpx;
				background: linear-gradient(309deg, #FFE8B2 0%, #F5CE71 100%);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				text-align: center;
				line-height: 48rpx;
			}
		}

	}



	.po-bikan {
		background: #fff;
		width: 100%;
		position: relative;

		.po-bikan-top {
			padding: 40rpx 32rpx;
		}

		.btn-bo {
			width: 750rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 14rpx;


			.btn_login_btn {
				width: 686rpx;
				height: 90rpx;
				background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				// margin-top: 116rpx;
				font-size: 36rpx;
				color: #fff;
				line-height: 90rpx;
				margin-left: 32rpx;
				text-align: center;
				font-weight: bold;
			}
		}

		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;

		}

		.qr-btn {
			font-size: 32rpx;
			color: #20C064;
		}

		.js-div {
			.js-item {
				width: 108rpx;
				height: 56rpx;
				background: #F5F7F8;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				font-size: 24rpx;
				color: #666666;
				text-align: center;
				line-height: 56rpx;

				&-sel {
					background: #FFEBEB;
					color: #F92626;
				}
			}
		}

		.gg-in {
			width: 686rpx;
			height: 72rpx;
			background: #F5F7F8;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 0 24rpx;
			margin-top: 24rpx;

			.gg-input {
				width: 586rpx;
			}
		}
	}
</style>